<template>
  <div class="top">
    网上购书商城

    <el-dropdown class="user-dropdown">
      <div
        style="background-color: transparent; color: white; cursor: pointer"
        @click="$refs.dropdown.toggle()"
      >
        关于<el-icon class="el-icon--right" style="display: none"
          ><arrow-down
        /></el-icon>
      </div>
      <template #dropdown>
        <el-dropdown-menu ref="dropdown">
          <el-dropdown-item @click="goAdmin">切换为管理员</el-dropdown-item>
          <el-dropdown-item @click="logout">退出</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <el-avatar @click="goPersonal" style="float: right"> user </el-avatar>
  </div>
  <div class="marquee-container">
    <div class="marquee" ref="content">{{ showContent }}</div>
  </div>
  <div class="common-layout">
    <el-container>
      <el-header>
        <el-input
          class="search"
          v-model="search"
          placeholder="请输入搜索内容"
          :clearable="true"
          @keyup.enter="handleSearch"
        >
          <template #suffix>
            <el-icon @click="handleSearch"><Search /></el-icon>
          </template>
        </el-input>
        <el-button
          style="margin-left: 15px; margin-top: -5px"
          type="primary"
          round
          @click="handleSearch"
          >搜索</el-button
        >
      </el-header>
      <el-container>
        <el-aside width="200px" style="margin-top: 0px">
          <el-col :span="28">
            <el-menu
              active-text-color="#aeb405"
              class="el-menu-vertical-demo"
              default-active="2"
              text-color="##656262"
              @open="handleOpen"
              @close="handleClose"
            >
              <el-menu-item index="1" @click="goHome">
                <el-icon><HomeFilled /></el-icon>
                <span :prefix="House">首页</span>
              </el-menu-item>
              <el-sub-menu index="2">
                <template #title>
                  <el-icon><Reading /></el-icon>
                  <span>图书分类</span>
                </template>

                <el-menu-item
                  v-for="(category, index) in categories"
                  :key="index"
                  :index="`${category.parentId}-${index}`"
                  @click="gocategory(category.categoryId)"
                >
                  <el-icon><Notebook /></el-icon>
                  {{ category.name }}
                </el-menu-item>
              </el-sub-menu>

              <el-menu-item index="3" @click="gocart">
                <el-icon><ShoppingCart /></el-icon>
                <span :prefix-icon="ShoppingCart"> 购物车</span>
              </el-menu-item>
              <el-menu-item index="4" @click="goOrder">
                <el-icon><Suitcase /></el-icon>
                <span>订单</span>
              </el-menu-item>
              <el-menu-item index="5" @click="goAddress">
                <el-icon><LocationInformation /></el-icon>
                <span>收货地址</span>
              </el-menu-item>
            </el-menu>
          </el-col>
        </el-aside>
        <el-container>
          <el-main>
            <router-view></router-view>
          </el-main>
          <el-footer></el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import Category from "./main/Category.vue";
import API from "../api/API.js";
import {
  Search,
  ShoppingCart,
  House,
  Reading,
  Notebook,
  Suitcase,
  HomeFilled,
  LocationInformation,
} from "@element-plus/icons-vue";

import { definedSearch } from "../store/store";

export default {
  name: "home",
  components: {
    Category,
    Search,
    ShoppingCart,
    House,
    Reading,
    Notebook,
    Suitcase,
    HomeFilled,
    LocationInformation,
  },
  data() {
    return {
      selectedCategoryId: null,
      categories: [],
      searchParams: {
        title: "",
        author: "",
        category: "",
      },
      search: "",
      content: [],
      showContent: "",
    };
  },
  mounted() {
    API.getCategories()
      .then((response) => {
        this.categories = response.data.data;
        console.log(this.categories);
      })
      .catch((error) => {
        console.error("Error fetching categories:", error);
      });
    API.getAnnouncements()
      .then((response) => {
        this.content = response.data.data;
        this.showContent = this.content[0].content || "";
        console.log(this.content);
      })
      .catch((error) => {
        console.error("Error fetching announcements:", error);
      });
  },
  // mounted() {

  // },
  methods: {
    delay: function () {
      let timer = 0;
      return function (callback, ms) {
        clearTimeout(timer);
        timer = setTimeout(callback, ms);
      };
    },
    handleSearch() {
      // newItem.search = this.search;
      API.getSearchBooks(this.search)
        .then((response) => {
          definedSearch().bookData = response.data.data.books;
          const timestamp = new Date().getTime();
          this.$router.push({
            path: "/home/Search",
            query: { refresh: timestamp },
          });
        })
        .catch((error) => {});
    },

    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },

    gocategory(categoryId) {
      this.selectedCategoryId = categoryId; // 更新选中分类ID
      console.log("Categoryn clicked", categoryId);
      this.$router.push(`/home/Category/${categoryId}`);
    },

    gocart() {
      this.$router.push("/home/Cart");
    },

    goAdmin() {
      this.$router.push("/Adminlogin");
    },
    goHome() {
      this.$router.push("/home");
    },
    goAddress() {
      this.$router.push("/home/Address");
    },
    goPersonal() {
      this.$router.push("/home/Personal");
    },
    goOrder() {
      this.$router.push("/home/Order");
    },
    logout() {
      localStorage.removeItem("token");
      this.$router.push({ path: "/login" });
    },
  },
};
</script>

<style>
.title {
  margin: 0px auto 40px auto;
  text-align: center;
  color: #505458;
}

.common-layout {
  margin: 0 auto;
}

.top {
  height: 130px;
  width: 100%;
  background-image: url("../img/M.jpg");

  color: rgb(248, 250, 249);
  font-size: 50px;
  text-align: center;
  line-height: 130px;
  text-shadow: 0px 1px 2px #a0baaa, 0px -5px 6px rgb(149, 214, 182),
    0px -9px 14px rgb(135, 150, 140), 0px -11px 18px rgb(39, 48, 32);
}

.el-header {
  height: auto;
  background-color: #979f9a;
  text-align: left;
  line-height: 50px;
  font-size: 30px;
  border-bottom: 1px solid #ccc;
  width: 100%;
}

.el-main {
  margin: 0px;
  padding: 20px;
  background-color: rgb(236, 244, 240);
  height: 100vh;
  width: 100%;
}

.demonstration {
  color: var(--el-text-color-secondary);
}

.el-carousel__item img {
  color: #475669;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
  text-align: center;
}

.search {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 400px;
  height: 32px;
  margin-top: 10px;
  margin-left: 400px;
  float: left;
  border: 0px solid #faf2f2;
  border-radius: 5px;
  text-align: center;
}

.el-avatar {
  flex: 1;
  margin-right: 10px;
  margin-top: 45px;
}
.user-dropdown {
  float: right;
  margin-right: 20px;
  margin-top: 60px;
}

.marquee {
  color: #6f705d;
  background-color: #fcfcfc;
}
.marquee-container {
  overflow: hidden; /* 隐藏超出容器的内容 */
  white-space: nowrap; /* 不换行 */
}

.marquee {
  display: inline-block; /* 使内容能水平排列 */
  animation: marquee 10s linear infinite; /* 动画名称、持续时间、速度曲线、循环次数 */
}

@keyframes marquee {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}
</style>
